<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>消息提示弹窗</title>
    <!--<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>-->
    <script src="./ts/notice.js"></script>
    <link rel="stylesheet" href="scss/Notice_style.css" type="text/css"/>
    <style>

        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
            background-color:  rgba(0,0,0,.1);
            -webkit-appearance: none;
        }
        ::-webkit-scrollbar-thumb {
            height: 5px;
            border: 1px solid transparent;
            border-top: none;
            border-bottom: none;
            -webkit-border-radius: 6px;
            background-color: rgba(0,0,0,.3);
            background-clip: padding-box;
            -webkit-box-shadow: inset -1px -1px 0 rgba(0,0,0,.2),inset 1px 1px 0 rgba(0,0,0,.2);
        }

        body{
            text-align:center;
            background-image:url(img/12.jpg),
                             url(img/11.jpg);
            background-size:cover,cover;
            background-repeat:no-repeat,no-repeat;
            background-position:0 0,0px 500px;
        }
        .sample{
            margin-top:10%;;
            display:inline-block;
            width:200px;
        }
        .sample a{
            display: block;
            background:rgba(0,0,0,.6);
            padding:15px 0;
            border:1px solid rgba(255,255,255,.5);
            text-align:center;
            color:#fff;
            text-decoration:none;
            font-weight:700;
        }
    </style>
</head>
<body>
<script>
    var i = 0
</script>
<div class="sample">
    <a href="javascript:Notice.alert({title:'这儿是标题',content:'这儿是正文',ok_callback:function(){console.log('you clicked ok btn');},draggable:true})" class="btn">alert</a><br/>
    <a href="javascript:Notice.confirm({title:'这儿是标题',content:'这儿是正文',ok_callback:function(){console.log('ok');},cancel_callback:function(){console.log('cancel');},draggable:true});" class="btn">confirm</a><br/>
    <a href="javascript:Notice.prompt({title:'这儿是标题',content:'这儿是正文',ok_callback:function(msg){console.log('msg:',msg)},cancel_callback:function(){console.log('cancel')},draggable:true})" class="btn">prompt</a><br/>
    <a href="javascript:Notice.msg({message:'这是一条提示信息', mode:'WARN', time:3000});" class="btn">msg</a><br/>
    <a href="javascript:Notice.notification({title:'这儿是标题'+i++, body:'这儿是正文', icon:'/favicon.ico',redirect:'http://www.baidu.com'});" class="btn">notification</a><br/>
</div>

</body>
</html>